<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    <meta charset="UTF-8">
    <title>movies</title>
    <style>
        .item {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .active {
            color: #7fb80e;
        }

        .vertical_video {
            width: 100%;
            height: 100px;
            position: fixed;
            top: 0;
            left: 0px;
            right: 0px;
        }

        .vertical_list {
            width: 85%;
        }

        .horizontal_list {
            position: fixed;
            width: 170px;
            right: 0;
            background-color: rgba(200, 200, 200, 0.3);
            height: 100%;
            margin: 0px;
            overflow-y: scroll
        }

        li {
            word-wrap: break-word;
        }
    </style>

</head>
<!-- 用于播放视频的网页，适配电脑及手机，手机上video在上list在下，电脑上video全屏list悬浮在右侧 -->

<body style="margin: 0px;padding: 0px;">
    <video id="video" class="vertical_video" controls preload="auto"></video>

    <!-- 用于显示播放手机作为服务器的视频 -->
    <ol class="vertical_list" id="movies_list_parent"></ol>


    <script>
        const proto = location.origin.indexOf("https") == 0 ? "https://" : "http://"

        const listView = document.getElementById("movies_list_parent");
        var video = document.getElementById('video');

        var currentPosition = 0;

        var data = [];

        function playVideo(position) {
            video.src = data[position]

            listView.children[currentPosition].classList.remove("active")
            currentPosition = position
            listView.children[currentPosition].classList.add("active")

            video.play()
        }
    </script>

    <script type="text/javascript" src="./getrequest.js"></script>
    <script type="text/javascript">
        function parseResult() {
            let innerString = "";
            var path = "";
            for (let i = 0; i < data.length; ++i) {
                path = data[i];
                innerString += "<li class='item' onclick=playVideo(" + i + ")>" + path.substring(path.lastIndexOf("/") + 1) + "</li>"
            }

            listView.innerHTML = innerString;
            listView.children[currentPosition].classList.add("active")
            //在线测试链接："http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
            video.src = data[currentPosition]
        }

        //根据宽高设置video宽高及list所在位置
        function setElementPosition() {
            if (window.innerWidth < window.innerHeight) {//纵向屏幕只设置高度
                video.style.height = window.innerWidth * 0.5625 + "px"
                listView.style.marginTop = video.style.height;
            } else {//横向屏幕设置video全屏，list悬浮在右侧
                video.style.height = "100%"
                listView.classList.remove("vertical_list")
                listView.classList.add("horizontal_list")


                //video添加点击事件隐藏列表及控制栏
                video.addEventListener("click", function (e) {
                    if (listView.style.transform != 'translateX(230px)') {
                        listView.style.transform = 'translateX(230px)'
                    } else {
                        listView.style.transform = 'translateX(0px)'
                    }

                    // if (video.controls) {
                    //     video.controls = false
                    // } else {
                    //     video.controls = true
                    // }

                    e.preventDefault(); //阻止事件冒泡
                })
            }
        }
        setElementPosition()


        //获取在线视频列表
        getRequest(proto + location.host
            + "/getVideos", "", function (res) {
                // console.log(res)
                data = JSON.parse(res)
                data.sort(function (a, b) {
                    return a.localeCompare(b, undefined, { sensitivity: 'base' });
                });
                // console.log(data)
                parseResult()
            })
        // data = ["https://www.runoob.com/try/demo_source/movie.mp4", "https://www.runoob.com/try/demo_source/mov_bbb.mp4", "https://divaid.github.io/resources/video/song_of_silience.mp4"];

        parseResult()//todo 从服务端获取数据并解析
    </script>
</body>

</html>